<template>
    <div>
        <br>
        <div style="display: flex; align-items: center">
            <el-popover placement="right" :width="240" trigger="click">
                <div class="addlist">
                    <h2>新增用户</h2>
                    <label for="">姓名</label>
                    <input type="text" placeholder="请输入姓名" v-model="inputName">
                    <br>
                    <label for="">年龄</label>
                    <input type="text" placeholder="请输入年龄" v-model="inputage">
                    <br>
                    <label for="">性别</label>
                    <span>男</span>
                    <input type="radio" name="sex" value="男" class="sex" v-model="inputsex">
                    <span>女</span>
                    <input type="radio" name="sex" value="女" class="sex" v-model="inputsex">
                    <br>
                    <label for="">日期</label>
                    <input type="text" v-model="value1" placeholder="输入出生日期 x-x-x" class="data">
                    <br>
                    <label for="">地址</label>
                    <input type="text" placeholder="请输入地址" v-model="inputaddress">
                    <br>
                    <button @click="cancel">取消</button>
                    <button @click="confirm">确定</button>
                </div>
                <template #reference>
                    <el-button style="margin-right: 16px" class="botton_1">+ 新增</el-button>
                </template>
            </el-popover>
            <input type="text" placeholder="请输入名字" class="shuru1" v-model="search">
            <button class="sous1" @click="searchB">搜索</button>
        </div>
        <br>
        <el-table :data="showData()" style="width: 100%" height="270">
            <el-table-column prop="name" label="Name" width="150" />
            <el-table-column prop="age" label="Age" width="150" />
            <el-table-column prop="gender" label="Sex" width="150" />
            <el-table-column prop="date" label="Date" width="220" />
            <el-table-column prop="address" label="Address" width="240" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> -->
                    <el-button size="small" type="danger" @click="open(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="centerDialogVisible" title="修改数据" width="30%" align-center>
            <el-input v-model="editList.name" placeholder="输入修改姓名" />
            <el-input v-model="editList.age" placeholder="输入修改年龄" />
            <el-radio-group v-model="editList.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
            <el-input v-model="editList.date" placeholder="输入修改日期" />
            <el-input v-model="editList.address" placeholder="输入修改地址" />
            <!-- <button @click="save">保存</button> -->
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="ck3(editList)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <br>
        <div class="public">
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
                    :small="small" :disabled="disabled" :background="background"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { watch } from 'vue';
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
const store = useStore()


//接收vuex中的数据，展示给用户
let tableData = ref([])
tableData.value = store.state.showData

let currentPage = ref(1)//默认页面
let pageSize = ref(5)//每页条数
let small = ref(false)
let background = ref(false)
let disabled = ref(false)

let iddata = ref(66)
let inputage = ref('')
let inputsex = ref('')
let inputName = ref('')
let value1 = ref('')
let inputaddress = ref('')
// 增加用户列表按钮
function confirm() {
    let obj = {
        id: iddata.value,
        age: inputage.value,
        gender: inputsex.value,
        name: inputName.value,
        date: value1.value,
        address: inputaddress.value
    }
    obj.id = iddata.value++
    store.dispatch('Acuserlist', obj)
    // 强制页面刷新
    // this.$forceUpdate()
}
// 取消按钮
function cancel() {
    inputage.value = '',
        inputsex.value = '',
        inputName.value = '',
        value1.value = '',
        inputaddress.value = ''
}


// 编辑用户
let editList = ref({})
const centerDialogVisible = ref(false)
function handleEdit(index, row) {
    centerDialogVisible.value = true
    editList.value.name=row.name
    editList.value.age=row.age
    editList.value.gender=row.gender
    editList.value.date=row.date
    editList.value.address=row.address
    editList.value.id=row.id
}
function ck3(value){
    console.log(store.state.showData);
    tableData.value=store.state.showData
    centerDialogVisible.value = false
    let fh=JSON.parse(JSON.stringify(value))
    console.log(fh,'fh');
    for (let index = 0; index < tableData.value.length; index++) {
        if (tableData.value[index].id == fh.id) {
            tableData.value[index]=fh
        }
    }
    store.commit('newshowData', tableData.value)
}
// 修改后的用户保存
// function save() {
//     if (editList.year == '') {
//         ElMessage({
//             message: '输入出生日期',
//             type: 'warning'
//         });
//     } else if (editList.name == '') {
//         ElMessage({
//             message: '输入姓名',
//             type: 'warning'
//         });
//     } else if (editList.age == '') {
//         ElMessage({
//             message: '输入年龄',
//             type: 'warning'
//         });
//     } else if (editList.sex == '') {
//         ElMessage({
//             message: '输入性别',
//             type: 'warning'
//         });
//     } else if (editList.dz == '') {
//         ElMessage({
//             message: '输入地址',
//             type: 'warning'
//         });
//     } else {
//         console.log('123',editList);
//         store.dispatch('AceditList', editList)
//         ElMessage({
//             message: '修改成功',
//             type: 'success'
//         });
//         visibe.value = false
//     }
// }

// 搜索
let search = ref('')
function searchB() {
    let arr = ref([])
    for (let index = 0; index < store.state.showData.length; index++) {
        if (store.state.showData[index].name == JSON.parse(localStorage.getItem('vuex')).name) {
            tableData.value = store.state.showData[index].name
        }
    }

    for (let index = 0; index < tableData.value.length; index++) {
        if (tableData.value[index].name.indexOf(search.value) != -1) {
            arr.value.push(tableData.value[index])
        }
    }
    tableData.value = arr.value
    // console.log('34543', tableData.value);
}
// 删除数据
function open(index, row) {
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            store.dispatch('Acdeleteuserlist', row.id)
            tableData.value = store.state.showData
            // console.log('111', tableData.value);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}

watch(search, (newvalue) => {
    console.log(newvalue);
    if (newvalue == '') {
        tableData.value = store.state.showData
        // console.log('789', tableData.value);
    }
})
// 分页器
function showData() {
    return tableData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
}



</script>

<style lang="less" scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

.public {
    width: 85vw;
    height: 7vh;

    //   outline: 1px solid red;
    .demo-pagination-block {
        position: absolute;
        left: 380px;
    }
}

.botton_1 {
    background-color: rgb(85, 118, 190);
}

.botton_1:hover {
    background-color: rgba(73, 106, 176, 0.662);
}

.shuru1,
.sous1 {
    position: relative;
    left: 670px;
}

.shuru1 {
    width: 18vw;
    height: 5vh;
    // outline: 1px solid red;
}

.sous1 {
    width: 3vw;
    height: 6vh;
    border: 0px;
    border-radius: 2px;
    margin-left: 10px;
    background-color: rgb(85, 118, 190);
}

.sous1:hover {
    background-color: rgba(73, 106, 176, 0.662);
}

.addlist {
    button {
        margin-left: 35px;
        margin-top: 10px;
        border: 0px;
        width: 3vw;
        height: 5vh;
        background-color: rgb(85, 118, 190);
    }

    button:hover {
        background-color: rgba(73, 106, 176, 0.662);
    }

    input {
        margin-left: 10px;
    }

    span {
        margin-left: 10px;
    }
}
</style>